<template>
  <l-content :app="app">
    <el-card>
      <el-form :inline="true" size="mini" :model="searchForm" class="demo-form-inline"
               onkeydown="if(event.keyCode==13){return false;}" @keyup.native.enter="onSearch">
        <el-form-item class="pull-right">
          <el-input
            class="w200"
            placeholder="网店编号/网店名称/网店平台"
            v-model="searchForm.param">
            <div slot="suffix" class="el-input__icon">
              <el-button size="mini" type="text" @click="onSearch">
                <i class="el-icon-search"></i>
              </el-button>
            </div>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="plus" @click="onAdd">新增</el-button>
        </el-form-item>
        <el-form-item>
          <c-pop-button type="danger" pMsg="确认要批量删除吗？" :disabled="!canDeleteBatch" @click="onDeleteBatch"><i
            class="el-icon-delete"></i>&nbsp;批量删除
          </c-pop-button>
        </el-form-item>
      </el-form>
      <!--
        table 根据这个来获取子组件的方法
        tableData 表格数据
        handleSelectionChange 监听选择
        handleCurrentChange 监听翻页事件
        loading 表格加载,！注意，loading的用法和原生的有区别
      -->
      <c-page-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        @size-change="handleSizeChange"
        @sort-change="handleSortChange"
        @current-change="handleCurrentChange"
        :loading="loading">
        <el-table-column
          type="selection"
          width="50">
        </el-table-column>
        <el-table-column
          prop="shopNo"
          label="网店编号"
          sortable='custom'
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="shopName"
          label="网店名称"
          sortable='custom'
          min-width="100">
        </el-table-column>
        <el-table-column
          prop="platformStr"
          label="网店平台"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="apiAccount"
          label="导单接口账号"
          sortable='custom'
          min-width="150">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          sortable='custom'
          min-width="100">
          <template slot-scope="scope">{{ scope.row.status==1?'有效':'无效'}}</template>
        </el-table-column>
        <el-table-column
          prop="openAutoIssue"
          label="自动出票"
          min-width="100">
          <template slot-scope="scope">
            <template v-if="getAutoIssue(scope.row.openAutoIssue) === 'on'">
              开启
            </template>
            <template v-else>
              关闭
            </template>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="300">
          <template slot-scope="scope">
            <template v-if="getAutoIssue(scope.row.openAutoIssue) === 'on'">
              <easy-button size="mini" @click="onAutoIssueOff($event, scope.row)">关闭</easy-button>
            </template>
            <template v-else>
              <easy-button type="primary" size="mini" @click="onAutoIssueOn($event, scope.row)">开启</easy-button>
            </template>
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>
            <el-button
              size="mini"
              type="default"
              @click="handleDetail(scope.row)">详情
            </el-button>
            <!-- 必须使用箭头函数把btn的值传下去才能控制开关的加载状态 -->
            <c-pop-button
              size="mini"
              type="danger"
              pMsg="确认要删除吗？"
              @click="btn => handleDelete(btn, scope.row)"
            >删除
            </c-pop-button>

          </template>
        </el-table-column>
      </c-page-table>
    </el-card>
    <component :is="dialog.tag" :data="dialog.data" @ok="handleCurrentChange(tableData.page)"
               @close="dialog.tag = ''"/>

  </l-content>
</template>

<script>
import SDialogAdd from './comps/AirOnlineShopManager/SDialogAdd'
import SDialogEdit from './comps/AirOnlineShopManager/SDialogEdit'
import SDialogDetail from './comps/AirOnlineShopManager/SDialogDetail'
import Dict from '@/constants/Dict'

// 用于查询的参数
const paramForm = {}
export default {
  name: 'AirOnlineShopManager',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  components: {
    SDialogAdd,
    SDialogEdit,
    SDialogDetail
  },
  data () {
    return {
      currentPage: 1,
      pageSize: 50,
      searchForm: {
        param: ''
      },
      dialog: {
        tag: '',
        data: {
          id: ''
        }
      },
      canDeleteBatch: false,
      loading: false,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      multipleSelection: [] // 选中项
    }
  },
  // 详情查看生命周期，约等于界面载入完成
  mounted () {
    this.handleCurrentChange(1)
  },
  destroyed () {
    this.$message.closeAll() // 避免弹框会影响到新开的页面
  },
  watch: {
    // 通过监听选择项来判断批量删除按钮是否可用
    multipleSelection (val) {
      this.canDeleteBatch = val.length > 0
    }
  },
  methods: {
    getAutoIssue (v) {
      return Dict.Map.autoIssue[v].code
    },
    onSearch () {
      // 把searchForm里面的值覆盖到paramForm里面去
      Object.assign(paramForm, this.searchForm)
      this.handleCurrentChange(1)
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
    },
    handleSortChange ({sidx, sord}) {
      // 排序设置
      paramForm.sidx = sidx
      paramForm.sord = sord
      this.handleCurrentChange(this.currentPage)
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      this.loading = true
      return new Promise((resolve, reject) => {
        // this.pageSize 获取当前每页显示数量,
        this.$service.airOnlineShop.queryAirOnlineShopPage(currentPage, this.pageSize, paramForm).then(res => {
          this.tableData = res.data
          resolve()
        }).catch(reject).finally(() => {
          this.loading = false
        })
      })
    },
    handleEdit (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogEdit'
    },
    handleDetail (row) {
      this.dialog.data.id = row.id
      this.dialog.tag = 'SDialogDetail'
    },
    handleDelete (btn, row) {
      this.$service.airOnlineShop.deleteAirOnlineShop(row.id).then(() => {
        this.handleCurrentChange(this.tableData.page)
      }).finally(() => {
        btn.isLoading(false)
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    onAdd () {
      this.dialog.tag = 'SDialogAdd'
    },
    onDeleteBatch (btn) {
      if (this.multipleSelection.length > 0) {
        const ids = []
        for (let i = 0; i < this.multipleSelection.length; i++) {
          ids.push(this.multipleSelection[i].id)
        }
        this.$service.airOnlineShop.batchDelete(ids).then(() => {
          this.handleCurrentChange(this.tableData.page)
        }).finally(() => {
          btn.isLoading(false)
        })
      } else {
        this.$message({
          message: '没有选中项',
          type: 'warning'
        })
        btn.isLoading(false)
      }
    },
    onAutoIssueOn (done, row) {
      this.$service.airOnlineShop.autoIssueOn({shopId: row.id}).then(res => {
        row.openAutoIssue = Dict.getByCode('autoIssue', 'on').key
      }).finally(done)
    },
    onAutoIssueOff (done, row) {
      this.$service.airOnlineShop.autoIssueOff({shopId: row.id}).then(res => {
        row.openAutoIssue = Dict.getByCode('autoIssue', 'off').key
      }).finally(done)
    }
  }
}
</script>

<style scoped>

</style>
